<template>
<div class="search-history">

    <van-cell title="搜索历史">
        <div v-if="isDeleteShow">
                    <span>全部删除</span>
        <span>完成</span>
        </div>

        <van-icon name="delete" v-else @click="isDeleteShow=true"></van-icon>
    </van-cell>
    <van-cell v-for="item in searchHistory" :key="item"
    @click="onSearchItemClick(item,index)">
      <template #value>
<span>{{  item}}</span>
      </template>
      <template #right-icon>
        <van-icon name="close" v-if="isDeleteShow"></van-icon>
      </template>
    </van-cell>
</div>

</template >


<script setup>
import {ref} from "vue"
        const props=defineProps({
            searchHistory:{
                type:Array
            }
        })
let isDeleteShow=ref(false)

const emits=defineEmits(["search"])
function onSearchItemClick(item,index){
if(isDeleteShow.value){
    props.searchHistory.splice(index,1)
}else{
    emits("search",item)
}
}
</script>


<style>

</style>